<template>
  <div class="module">
    <MTitle ref="title" icon="gjtj" @search="initData"></MTitle>
    <MBox>
      <MTabs class="m-tabs" :list="list" :activeIndex="activeIndex" @change="tabChange"></MTabs>
      <div class="content-box">
        <div class="animate">
          <div class="ball-box">
            <div class="ball"
                 :style="{
                  transform: 'rotateY('+360/allData.length*index+'deg) translateZ(201px)'
               }"
                 v-for="(item, index) in allData" :class="'ball' + (index + 1)" :key="index">
              <p>{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
    </MBox>
  </div>
</template>
<script>
import MTitle from '../base-com/m-title/m-title'
import MBox from '../base-com/m-box/m-box'
import MTabs from '../base-com/m-tabs/m-tabs'

import { warningStatistics } from '@/api/warnings'
import { shipMixin } from '../../mixins/mixin'

export default {
  mixins: [shipMixin],
  components: {
    MTitle,
    MBox,
    MTabs
  },
  data() {
    return {
      activeIndex: 0,
      list: [
        {
          name: '告警类型',
          value: 'type',
        },
      ],
      allData: []
    }
  },
  methods: {
    shipChange() {
      this.initData();
    },
    initData() {
      const searchData = this.$refs.title.getForm()
      searchData.shipId = this.shipId
      warningStatistics(searchData).then(res => {
        const result = res?.result?.type || []
        this.allData = result.slice(0, 10)
      })

    },
    tabChange(index) {
    },
    init() {

    }
  }
}
</script>


<style lang="scss" scoped>
.content-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.animate {
  width: 402px;
  height: 128px;
  background: url("./images/bg.png") no-repeat center;
  position: relative;
  border: 1px solid red;
  &:before {
    content: '';
    display: block;
    width: 1px;
    height: 150%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: red;
  }
  &:after {
    content: '';
    display: block;
    width: 150%;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: red;
  }
  .ball-box {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(-10deg);
    margin-left: 201-25px;
    animation: sport 10s linear 0s infinite normal;
    transform-origin: 0 calc(100% - 25px) !important;
    .ball {
      width: 50px;
      height: 76px;
      background: red;
      font-size: 16px;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
@keyframes sport {
  from {
    /*
    注意点:
    1.动画中如果有和默认样式中同名的属性, 会覆盖默认样式中同名的属性
    2.在编写动画的时候, 固定不变的值写在前面, 需要变化的值写在后面
    */
    transform: rotateX(-10deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-10deg) rotateY(360deg);
  }
}
</style>
